<template>
  <div class="job-post-container">
    <div class="job-post-form">
      <h2>{{ isEditing ? '编辑职位' : '发布新职位' }}</h2>
      <form @submit.prevent="handleSubmit">
        <div class="form-group">
          <label for="title">职位标题:</label>
          <input 
            type="text" 
            id="title" 
            v-model="jobForm.title" 
            required 
            placeholder="请输入职位标题"
          />
        </div>
        
        <div class="form-group">
          <label for="company">公司名称:</label>
          <input 
            type="text" 
            id="company" 
            v-model="jobForm.company" 
            required 
            placeholder="请输入公司名称"
          />
        </div>
        
        <div class="form-group">
          <label for="location">工作地点:</label>
          <input 
            type="text" 
            id="location" 
            v-model="jobForm.location" 
            required 
            placeholder="请输入工作地点"
          />
        </div>
        
        <div class="form-group">
          <label for="salary">薪资范围:</label>
          <input 
            type="text" 
            id="salary" 
            v-model="jobForm.salary" 
            placeholder="例如：10K-15K"
          />
        </div>
        
        <div class="form-group">
          <label for="description">职位描述:</label>
          <textarea 
            id="description" 
            v-model="jobForm.description" 
            required 
            placeholder="请输入职位详细描述"
            rows="6"
          ></textarea>
        </div>
        
        <div v-if="error" class="error-message">
          {{ error }}
        </div>
        
        <div class="form-actions">
          <button type="submit" class="submit-btn">{{ isEditing ? '更新职位' : '发布职位' }}</button>
          <button v-if="isEditing" type="button" @click="handleCancel" class="cancel-btn">取消</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { createJob, updateJobInfo, getJobById } from '../services/jobService';
import { getCurrentUser } from '../services/authService';

const route = useRoute();
const router = useRouter();

// 表单数据
const jobForm = ref({
  title: '',
  company: '',
  location: '',
  salary: '',
  description: ''
});

// 状态
const isEditing = ref(false);
const editingJobId = ref(null);
const error = ref('');

// 检查是否是编辑模式
onMounted(() => {
  if (route.params.id) {
    isEditing.value = true;
    editingJobId.value = route.params.id;
    loadJobData();
  }
});

// 加载职位数据（编辑模式）
const loadJobData = () => {
  try {
    const job = getJobById(editingJobId.value);
    if (job) {
      jobForm.value = {
        title: job.title,
        company: job.company,
        location: job.location,
        salary: job.salary,
        description: job.description
      };
    } else {
      router.push('/my-jobs');
    }
  } catch (err) {
    error.value = '加载职位信息失败';
  }
};

// 提交处理
const handleSubmit = () => {
  try {
    const currentUser = getCurrentUser();
    
    if (isEditing.value) {
      // 更新职位
      updateJobInfo(editingJobId.value, jobForm.value);
    } else {
      // 创建新职位
      createJob(jobForm.value, currentUser.id);
    }
    
    // 提交成功后跳转到我的职位页面
    router.push('/my-jobs');
  } catch (err) {
    error.value = err.message;
  }
};

// 取消编辑
const handleCancel = () => {
  router.push('/my-jobs');
};
</script>

<style scoped>
.job-post-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.job-post-form {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.job-post-form h2 {
  text-align: center;
  margin-bottom: 1.5rem;
  color: #2c3e50;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #34495e;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.form-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
}

.submit-btn {
  padding: 0.75rem 2rem;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.submit-btn:hover {
  background-color: #2980b9;
}

.cancel-btn {
  padding: 0.75rem 2rem;
  background-color: #95a5a6;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.cancel-btn:hover {
  background-color: #7f8c8d;
}

.error-message {
  color: #e74c3c;
  background-color: #fdf2f2;
  padding: 0.75rem;
  border-radius: 4px;
  margin-bottom: 1rem;
  text-align: center;
}
</style>